<%@ page language="java" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://kzw.com/functions" prefix="kfn"%>
<c:set var="path" value="${pageContext.request.contextPath}"/>

<!DOCTYPE html>
<html>
<head>
<base href="${path}/pages/">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>学生管理系统</title>
<link rel="stylesheet" href="../layui/css/layui.css">
</head>
<body>
	
<div class="layui-fluid">
	<div class="layui-form" style="margin-top: 10px">
		<input type="hidden" name="id" value="${article.id}">
  		<div class="layui-form-item">
    		<label class="layui-form-label">文章标题</label>
    		<div class="layui-input-block">
      			<input type="text" name="title" value="${article.title}" lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input">
    		</div>
  		</div>
  		<div class="layui-form-item">
    		<label class="layui-form-label">发布时间</label>
    		<div class="layui-input-block">
      			<input type="text" name="ctime" id="ctime" value="${article.ctime}" lay-verify="required" autocomplete="off" class="layui-input">
    		</div>
  		</div>    		
  		<div class="layui-form-item layui-form-text">
    		<label class="layui-form-label">文章类型</label>
    		<div class="layui-input-block">
      			<select name="typeId" lay-verify="required">      				
			       	<c:forEach var="d" items="${kfn:dict('文章类型')}">         		
      				<option value="${d.id}" <c:if test="${d.id==article.typeId}">selected</c:if>>${d.itemValue}</option>
      				</c:forEach>  
			  	</select>
    		</div>
  		</div>  
  		<div class="layui-form-item">
    		<div class="layui-input-block">
      			<button type="button" class="layui-btn" id="imgbtn">
  					<i class="layui-icon">&#xe67c;</i> 上传标题图片  					
				</button>
				<span id="imgpath" style="margin-left:20px;">
					<c:if test="${!empty article.titlePic}">
						<a target="_blank" href="${article.titlePic}">${article.titlePic}</a>
					</c:if>
				</span>
				<input type="hidden" name="titlePic" id="titlePic" value="${article.titlePic}">
    		</div>
  		</div>    			
  		<div class="layui-form-item layui-form-text">
    		<label class="layui-form-label">文章内容</label>
    		<div class="layui-input-block">
      			<textarea name="content" id="content" style="display:none;" class="layui-textarea">${article.content}</textarea>
    		</div>
  		</div>
  		<div class="layui-form-item layui-hide">
	      	<input type="button" lay-submit lay-filter="lay-form-submit" id="lay-form-submit">
	    </div>
  	</div>
  
  	<script src="../layui/layui.js"></script>
	<script>
	layui.use(['form', 'laydate', 'upload', 'layedit'], function(){
		var form = layui.form;
		var $ = layui.$;
		var upload = layui.upload;
		var layedit = layui.layedit;
		
		//时间
		layui.laydate.render({elem: '#ctime', value: new Date()});
		//文件上传
		upload.render({
			elem: '#imgbtn',
			url: '${path}/api/upload',
			done: function(resp) {
				if(resp.success) {
					$('#titlePic').val(resp.data.src);
					$('#imgpath').html('<a target="_blank" href="'+resp.data.src+'">'+resp.data.title+'</a>');
				}	
			}			
		});
		//富文本框
		layedit.set({
  			uploadImage: {url: '${path}/api/upload'}
		});
		var editIdx = layedit.build('content');
		
		//监听提交
    	form.on('submit(lay-form-submit)', function(data) {
    		// 将富文本框中的内容，赋值给content文本域
    		data.field.content = layedit.getContent(editIdx);
    		
      		var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引  
      		//提交ajax成功后，关闭当前弹层并重载表格
      		$.post('${path}/action/article/save', data.field, function(json) {
      				parent.layui.table.reload('lay-table'); //重载表格
      	      		parent.layer.close(index); //再执行关闭      				
      			}, 'JSON');
    	});
		
	});	
	
	</script>
</div>

</body>
</html>
